<template>
  <TopNavBar type="back" :title="_t18('13_problem_title')" /> 

  <div class="problem-container">
    <div class="faq-item">
      <h2>{{ _t18('13_problem_q1') }}</h2>
      <p>{{ _t18('13_problem_a1') }}</p>
    </div>
    <div class="faq-item">
      <h2>{{ _t18('13_problem_q2') }}</h2>
      <p>{{ _t18('13_problem_a2') }}</p>
    </div>
    <div class="faq-item">
      <h2>{{ _t18('13_problem_q3') }}</h2>
      <p>{{ _t18('13_problem_a3') }}</p>
    </div>
    <div class="faq-item">
      <h2>{{ _t18('13_problem_q4') }}</h2>
      <p>{{ _t18('13_problem_a4') }}</p>
      <ul>
        <li>{{ _t18('13_problem_rate1') }}</li>
        <li>{{ _t18('13_problem_rate2') }}</li>
        <li>{{ _t18('13_problem_rate3') }}</li>
        <li>{{ _t18('13_problem_rate4') }}</li>
        <li>{{ _t18('13_problem_rate5') }}</li>
        <li>{{ _t18('13_problem_rate6') }}</li>
      </ul>
      <p>{{ _t18('13_problem_note') }}</p>
    </div>
    <div class="faq-item">
      <h2>{{ _t18('13_problem_q5') }}</h2>
      <p>{{ _t18('13_problem_a5') }}</p>
    </div>
  </div>
</template>


<script setup>
import TopNavBar from '@/components/common/TopNavBar.vue'
// import TopNavBar from '@/components/TopNavBar.vue';

// No script logic needed for static FAQ
</script>

<style scoped>
.problem-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px 12px 60px 12px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
h1 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 18px;
  color: #222;
  text-align: center;
}
.faq-item {
  margin-bottom: 22px;
}
.faq-item h2 {
  font-size: 16px;
  font-weight: 600;
  color: #111;
  margin-bottom: 8px;
}
.faq-item p, .faq-item ul {
  font-size: 14px;
  color: #444;
  margin: 0 0 8px 0;
  line-height: 1.7;
}
.faq-item ul {
  padding-left: 20px;
}
.faq-item li {
  margin-bottom: 4px;
}
</style> 